<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-button type="primary" @click="showSortDialog">添加分类</el-button>
            <tree-table :data="sortList" :columns="columns" :selection-type="false" :expand-type="false" show-index	index-text="#" border>
                <!--是否有效-->
                <template v-slot:isRight="scope">
                    <i v-if="scope.row.cat_deleted" class="el-icon-success"></i>
                    <i v-else class="el-icon-error"></i>
                </template>
                <!--排序-->
                <template v-slot:order="scope">
                    <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
                    <el-tag v-else-if="scope.row.cat_level === 1" size="mini" type="success">二级</el-tag>
                    <el-tag v-else size="mini" type="warning">三级</el-tag>
                </template>
                <!--操作-->
                <template v-slot:opt="scope">
                    <!--修改-->
                        <el-button type="primary" 
                        @click="editSortDialog(scope.row)"
                        icon="el-icon-edit" size="mini"
                        >编辑</el-button>
                        <!--删除-->
                        <el-button icon="el-icon-delete" type="danger" size="mini"
                        @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </tree-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="sortPage.pagenum"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="sortPage.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        
        <!-- 添加修改角色 -->
        <el-dialog
        :title="type != ''?'修改':'添加分类'"
        :visible.sync="addSortDialog"
        @close="closeSortDialog"
        width="40%" 
        center>
            <el-form ref="sortForm" :model="sortForm" :rules="rules" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="sortForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader clearable
                    v-model="value" 
                    :options="parentSortList"
                    :props="sortProps"
                    @change="handleChange"></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="cancel" @click="addSortDialog = false">取 消</div>
                <div class="determine"  @click="addSortFunc('sortForm')">确 定</div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    categoriesRq,
    sortAdd
} from  "@/request/api"; 
export default {
    name: 'categories',
    data(){
        return{
            rules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            sortList: [],
            addSortDialog: false,
            type: '',
            sortForm:{
                cat_name: '',
                cat_pid: 0,
                cat_level: 0,
            },
            sortPage:{
                type: [],
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            columns:[
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isRight',
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'order',
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt',
                }
            ],
            parentSortList: [],
            value: [],
            sortProps: { 
                expandTrigger: 'hover',
                value:'cat_id',
                label:'cat_name',
                children: 'children'
            }
        }
    },
    created(){
        this.getSortList()
    },
    methods:{
        getSortList(){
            categoriesRq(this.sortPage).then(res=>{
                if(res.meta.status == 200){
                    this.sortList = res.data.result;
                    this.total = res.data.total;
                }else{
                    this.$message.error(res.meta.msg);
                    return false;
                }
            })
        },
        //页码切换
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.sortPage.pagesize = val;
            this.getSortList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.sortPage.pagenum = val;
            this.getSortList();
        },
        //添加
        showSortDialog(){
            this.addSortDialog = true;
            this.getAllsort();
        },
        async getAllsort(){
            let res = await categoriesRq({type:2});
            if(res.meta.status == 200){
                this.parentSortList = res.data;
            }else{
                this.$message.error(res.meta.msg);
                return false;
            }
        },
        //修改
        editSortDialog(info){
            this.type = 'edit';
            this.addSortDialog = true;
        },
        closeSortDialog(){

        },
        // 确认提交
        addSortFunc(formName){
            this.$refs[formName].validate(async valid => {
                if(!valid) return;
                var loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.type == 'edit'){
                    editRole(this.addform).then(res => {
                        if(res.meta.status == 200){
                            this.getSortList();
                            this.$message.success('修改成功！');
                            this.addSortDialog = false
                        }else{
                            this.$message.error(res.meta.msg);
                        }
                        loading.close();
                    })
                }else{
                    sortAdd(this.addform).then(res => {
                        if(res.meta.status == 201){
                            this.getSortList();
                            this.$message.success(res.meta.msg);
                            this.addSortDialog = false
                        }else{
                            this.$message.error(res.meta.msg);
                        }
                        loading.close();
                    })
                }
                
            });
        },
        //联动选择
        handleChange(value) {
            console.log(value);
        }
    }
}
</script>

<style lang="less" scoped>
.zk-table{
    margin-top: 15px;
}
.el-icon-success{
    color: rgb(0, 146, 139);
}
.el-icon-error{
    color: rgb(163, 0, 0);
}
.el-cascader{
    width: 100%;
}
</style>